<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SignIn</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-min.js"></script>
    <style>
        #signForm {
            margin-left: 30%;
            margin-top: 5%;
        }

        #signForm:hover {
            box-shadow: 0px 2px 4px #5a6268;
        }

        #signForm > img {
            width: 200px;
            height: 200px;
            margin-left: 25%;
        }

        a {
            text-decoration: none;
        }

        #control {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="card" id="signForm">
            <img class="card-img-top" src="/static/img/logo.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">注册</h4>
                <span class="badge badge-danger" v-if="isError">{{errorInfo}}</span>
                <div class="form-group">
                    <label for="phoneNum">手机号</label>
                    <input type="text" class="form-control" v-model="num" id="phoneNum" placeholder="输入手机号">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="text" class="form-control" v-model="pwd" id="password" placeholder="输入密码">
                </div>
                <div class="form-group">
                    <label for="checkCode">验证码</label>
                    <div class="input-group mb-3">
                        <input type="text" id="checkCode" v-model="cc" class="form-control" placeholder="输入验证码" aria-label="验证码"
                               aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button">获取验证码</button>
                        </div>
                    </div>
                </div>
                <div class="btn-group" id="control">
                    <a class="btn btn-primary" @click="sign" name="button">注册</a>
                    <a class="btn btn-link" href="/" name="button">首页</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var signFormObject = new Vue({
        el: '#signForm',
        data: {
            num:'',
            pwd:'',
            cc:'',
            isError:false,
            errorInfo:''
        },
        methods: {
            sign:function () {
                var data = {
                    number:signFormObject.num,
                    password:signFormObject.pwd,
                    cc:signFormObject.cc,
                }
                var url = '/sign';
                $.post(url,data,function (result) {
                    console.log(result);
                    switch (result['result']) {
                        case 'success':
                            location.href = "/";
                            break;
                        case 'failed':
                            signFormObject.isError = true;
                            signFormObject.errorInfo = "注册失败";
                            break;
                        case 'code error':
                            signFormObject.isError = true;
                            signFormObject.errorInfo = "验证码错误";
                            break;
                        case 'user duplicated':
                            signFormObject.isError = true;
                            signFormObject.errorInfo = "账号重复";
                            break;
                        case 'number not valid':
                            signFormObject.isError = true;
                            signFormObject.errorInfo = "输入错误";
                            break;
                        default:break;
                    }
                });
            }
        }
    });
</script>
</body>
</html>
